<template>
  <view class="container">
    <!-- 封面图片 -->
    <view
      class="cover"
      v-if="LoginUser.cover"
      :style="{ background: 'url(' + LoginUser.cover + ')' }"
    >
      <view class="avatar">
        <!-- #ifdef MP-WEIXIN -->
        <open-data type="userAvatarUrl"></open-data>
        <!-- #endif-->

        <!-- #ifdef H5 || APP-PLUS -->
        <u-image
          width="100%"
          height="200px"
          src="/static/images/cover.jpg"
        ></u-image>
        <!-- #endif -->
      </view>
    </view>

    <!-- 没有封面图 -->
    <view class="cover" v-else>
      <view class="avatar">
        <!-- #ifdef MP-WEIXIN -->
        <open-data type="userAvatarUrl"></open-data>
        <!-- #endif-->

        <!-- #ifdef H5 || APP-PLUS -->
        <u-image
          width="100%"
          height="200px"
          src="/static/images/cover.jpg"
        ></u-image>
        <!-- #endif -->
      </view>
    </view>

    <view class="profile">
      <u--form
        :model="LoginUser"
        labelPosition="left"
        ref="profile"
        :errorType="errorType"
      >
        <!-- 昵称 -->
        <u-form-item label="昵称" prop="nickname">
          <u--input
            v-model="LoginUser.nickname"
            placeholder="请输入昵称"
          ></u--input>
        </u-form-item>

        <!-- 邮箱 -->
        <u-form-item label="邮箱" prop="email">
          <u--input
            v-model="LoginUser.email"
            disabled
            placeholder="请输入邮箱"
          ></u--input>
        </u-form-item>

        <!-- 性别 -->
        <u-form-item label="性别" prop="sex" @click="SexShow = true">
          <u--input
            v-model="LoginUser.sex_text"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择性别"
            border="none"
          >
          </u--input>
          <u-icon slot="right" name="arrow-right"> </u-icon>
        </u-form-item>

        <!-- 地区 -->
        <u-form-item label="地区" prop="region_text" @click="RegionShow = true">
          <pick-regions
            :defaultRegion="LoginUser.region"
            @getRegion="handleGetRegion"
          >
            <u--input
              v-model="LoginUser.region_text"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择地区"
              border="none"
            >
            </u--input>
          </pick-regions>
          <u-icon slot="right" name="arrow-right"> </u-icon>
        </u-form-item>

        <!-- 个人简介 -->
        <u-form-item label="简介" prop="content">
          <u--textarea
            v-model="LoginUser.content"
            placeholder="请输入个人简介"
            height="70"
            count="true"
          >
          </u--textarea>
        </u-form-item>

        <!-- 封面图 -->
        <u-form-item label="封面图" prop="cover" labelWidth="50">
          <u-upload
            ref="cover"
            name="cover"
            :maxCount="1"
            :fileList="cover"
            @afterRead="CoverUpload"
            @delete="CoverDel"
          >
          </u-upload>
        </u-form-item>

        <!-- 提交按钮 -->
        <u-button
          @click="submit"
          type="primary"
          shape="circle"
          text="提交修改"
        ></u-button>
      </u--form>
    </view>

    <!-- 性别的选择器 -->
    <u-picker
      :show="SexShow"
      :columns="SexList"
      keyName="label"
      @confirm="SexChange"
      @cancel="SexShow = false"
    >
    </u-picker>

    <!-- 消息提示的组件 -->
    <u-toast ref="notice"></u-toast>
  </view>
</template>
<script>
// 引用地区选择组件
import pickRegions from '@/components/pick-regions/pick-regions.vue';
export default {
  components: {
    pickRegions
  },
  onShow() {
    this.$u.auth.check()

    let LoginUser = uni.getStorageSync('LoginUser')

    if (LoginUser.cover_cdn) {
      this.cover = [{
        url: LoginUser.cover_cdn
      }]
    }

    this.LoginUser = LoginUser

    // 让表单绑定的验证规则生效
    this.$refs.profile.setRules(this.rules)
  },
  data() {
    return {
      LoginUser: {
        nickname: '',
        email: '',
        sex: '',
        region_text: '',
        content: '',
        cover: '',
        sex_text: ''
      },
      SexShow: false,
      errorType: ['toast'],
      SexList: [
        [{
          label: '男',
          id: '1',
        },
        {
          label: '女',
          id: '2'
        },
        {
          label: '保密',
          id: '0'
        }
        ]
      ],
      cover: [],
      RegionShow: false,
      RegionCode: null,
      //表单验证规则
      rules: {
        email: [{
          required: true,
          type: 'email',
          message: '您输入的邮箱格式错误',
          // 可以单个或者同时写两个触发验证方式
          trigger: 'blur,change'
        }],
        nickname: [{
          required: true,
          message: '您输入的昵称错误',
          // 可以单个或者同时写两个触发验证方式
          trigger: 'blur,change'
        }],
        sex: [{
          required: true,
          message: '请选择性别',
          trigger: ['change', 'blur'],
        },],
        region_text: [{
          required: true,
          message: '请选择地区',
          trigger: ['change', 'blur'],
        }],
        content: [{
          required: true,
          message: '请输入内容',
          trigger: ['change', 'blur'],
        }],
      }
    }
  },
  methods: {
    handleGetRegion(item) {
      //获取到选中的省，市，区
      let [province, city, district] = item

      //定义字符串 => 存选中的地区文本
      let region_text = ''

      // 存选中的地区码
      let code = null

      if (province) {
        region_text += province.name + '-'
        code = province.code
      }

      if (city) {
        region_text += city.name + '-'
        code = city.code
      }

      if (district) {
        region_text += district.name
        code = district.code
      }

      this.LoginUser.region_text = region_text

      this.RegionCode = code

    },
    SexChange(value) {
      // 获取选中的值
      let item = value.value

      // 赋值显示的值
      this.LoginUser.sex_text = item[0].label

      // 获取id重新赋值给用户的性别属性
      this.LoginUser.sex = item[0].id // 0 1 2

      // 关闭选择器
      this.SexShow = false
    },
    CoverDel() {
      this.cover = []
    },
    CoverUpload(item) {
      //   console.log(item.file);
      //   通过push赋值
      //   let arr = []
      //   arr.push(item.file)
      //   this.cover = arr
      this.cover = [item.file]
    },
    submit() {
      this.$refs.profile.validate().then(async res => {
        let thumb = this.cover[0].thumb
        let result = null
        if (thumb) {
          let data = {
            filePath: thumb,
            name: 'cover',
            formData: {
              userid: this.LoginUser.id,
              nickname: this.LoginUser.nickname,
              sex: this.LoginUser.sex,
              content: this.LoginUser.content
            }
          }

          if (this.RegionCode) {
            data.formData.code = this.RegionCode
          }

          result = await this.$u.api.user.FroFile(data)
        } else {
          let data = {
            userid: this.LoginUser.id,
            nickname: this.LoginUser.nickname,
            sex: this.LoginUser.sex,
            content: this.LoginUser.content
          }

          if (this.RegionCode) {
            data.code = this.RegionCode
          }

          result = await this.$u.api.user.FroFile(data)
        }

        if (result.code == 1) {
          this.$refs.notice.show({
            type: 'success',
            message: result.msg,
            icon: true,
            complete: () => {
              uni.setStorageSync('LoginUser', result.data)

              uni.switchTab({
                url: '/pages/base/index'
              });
            }
          })
        } else {
          this.$refs.notice.show({
            type: 'error',
            message: result.msg,
            icon: true,
            complete: () => {
              uni.setStorageSync('LoginUser', null)
              // this.$u.route({
              //     url:'/pages/bind/bind',
              //     type:'navigateTo'
              // })
            }
          })
        }
      }).catch(errors => {
        this.$refs.notice.show({
          type: 'error',
          message: errors[0].message,
          icon: true
        })
      })
    }
  },
}
</script>
<style>
.cover {
  width: 100%;
  background: linear-gradient(rgb(1, 115, 222), rgb(78, 169, 245));
  position: relative;
  padding: 5vh 0vh;
  text-align: center;
  z-index: 0;
}

.nickname {
  color: #fff;
}

.avatar {
  width: 12vh;
  height: 12vh;
  margin: 0 auto;
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 3vh;
}

.profile {
  margin-top: 3vh;
  background: #fff;
  padding: 0vh 2vh;
  text-align: left;
}
</style>
